<template>

  <!-- 图片及其内容展示 -->
  <div style="display: inline-block; margin:5px">
    <!-- 卡片,身体展示 -->
    <el-card @click="goto" shadow="hover" style="width: 250px ;">
      <!-- 产品图片展示 product.coverImage-->
      <el-image v-bind:src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'" style="width:100%; height: 100% ; text-align: center; " />
      <!-- 产品信息展示 -->
      <template #footer>
        <span>名称:{{ product.productName }}</span><br />
        <span>价格:{{ product.price }}</span>
      </template>
    </el-card>
  </div>


</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter();

const props = defineProps({

  product: {
    //对象也能传,属性字段也能传
    type: Object,
    required: true
  }

})

function goto() {
  router.push({ path: `/product/detail/${props.product.id}`, query: props.product })
}


</script>

<style scoped></style>
